/* 2 顶部导航 */
.top-cate {
  display: flex;
  justify-content: space-between;
  padding: 22px 0;
  align-items: center;

  .logo {}

  .cate {
    display: flex;

    li {
      &.active {
        color: var(--theme);
        position: relative;

        /* 伪元素 不存在真正的标签，但是可以通过样式 让它出现 */
        /* 每一个标签元素 都存在两个伪元素 before和after */
        &::before {
          /* 必须要有一个content属性 表现里面文本 */
          content: "";
          position: absolute;
          width: 100%;
          height: 2px;
          background-color: var(--theme);
          bottom: -10px;
          left: 0;
        }
      }


      margin-right: 47px;

      a {}
    }
  }

  .search-row {
    width: 170px;
    height: 42px;
    position: relative;
    border-bottom: 3px solid #eee;

    .icon-search {
      position: absolute;
      /* 垂直居中 */
      top: 50%;
      transform: translate(0, -50%);
      /* 字体图标是字体 */
      color: blue;
      font-size: 20px;


    }

    input {
      /* 
      占位符  placeholder 字体颜色  ::placeholder
       文字  color: red;
       */
      height: 100%;
      text-indent: 2em;

      /* 伪类 */
      &::placeholder {
        color: green;
      }

    }
  }



  .shopping-cart {
    position: relative;

    .icon-cart-full {
      font-size: 30px;
    }

    i {
      position: absolute;
      top: 0;
      right: -10px;
      background-color: orange;
      border-radius: 10px;
      width: 24px;
      text-align: center;
      background-color: #E26237;
      color: #fff;
      top: -6px;
    }
  }
}

/* 3 banner */
.banner {
  height: 500px;
  background-image: url(../uploads/banner1.png);

  ul {
    height: 100%;
    width: 250px;
    background-color: rgba(0, 0, 0, 0.42);



    li {

      font-size: 14px;


      a {
        padding: 13px 10px 13px 30px;
        display: flex;
        width: 100%;
        justify-content: space-between;
        color: #fff;

        &:hover {
          background-color: var(--theme);
        }

        .icon-arrow-right-bold {}
      }
    }
  }
}